<template>
  <!-- 修改密码模块 -->
  <div class="modify-mation">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="原密码" prop="pass1">
        <el-input :type="pass4" v-model="form.pass1"></el-input>
        <span
          class="iconfont icon-Eyesclosed eyedown"
          v-show="eyeflag"
          @click="yuanb"
        ></span>
        <span
          class="iconfont icon-icon-eye-open eyeup"
          v-show="!eyeflag"
          @click="yuanz"
        ></span>
      </el-form-item>

      <el-form-item label="新密码" prop="pass2">
        <el-input :type="pass5" v-model="form.pass2"></el-input>
        <span
          class="iconfont icon-Eyesclosed eyedown"
          v-show="yuanflag"
          @click="yuanb1"
        ></span>
        <span
          class="iconfont icon-icon-eye-open eyeup"
          v-show="!yuanflag"
          @click="yuanz1"
        ></span>
      </el-form-item>

      <el-form-item label="确认密码" prop="pass3">
        <el-input :type="pass6" v-model="form.pass3"></el-input>
        <span
          class="iconfont icon-Eyesclosed eyedown"
          v-show="queflag"
          @click="yuanb2"
        ></span>
        <span
          class="iconfont icon-icon-eye-open eyeup"
          v-show="!queflag"
          @click="yuanz2"
        ></span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
        <button @click="loginOut" class="btnout">退出登录</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from "vuex";
import { computed } from "vue";
export default {
  name: "Password",
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      pass4: "password",
      pass5: "password",
      pass6: "password",
      eyeflag: true,
      yuanflag: true,
      queflag: true,

      form: {
        pass1: "",
        pass2: "",
        pass3: "",
      },
      rules: {
        pass1: [
          {
            validator(ruler, value, callback) {
              // 1，校验密码的长度
              if (value.length < 6 || value.length > 18) {
                return callback(new Error("请输入6 ~ 18位密码"));
              }
              // 2，校验密码字符验证，正则表达式
              if (/^[a-zA-Z]\w{5,17}$/.test(value)) {
                callback(); //校验成功
              } else {
                callback(new Error("以字母包含字符数字下划线"));
              }
            },
          },
        ],
        pass2: [
          {
            validator(ruler, value, callback) {
              // 1，校验密码的长度
              if (value.length < 6 || value.length > 18) {
                return callback(new Error("请输入6 ~ 18位密码"));
              }
              // 2，校验密码字符验证，正则表达式
              if (/^[a-zA-Z]\w{5,17}$/.test(value)) {
                callback(); //校验成功
              } else {
                callback(new Error("以字母包含字符数字下划线"));
              }
            },
          },
        ],
        pass3: [
          {
            validator: (ruler, value, callback) => {
              if (this.form.pass2 === value) {
                //  密码一致
                callback();
              } else {
                //  密码不一致
                callback(new Error("确认密码与新密码不一致"));
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["updateUserInfo", "clearUserInfo"]),
    // 确认修改
    onSubmit() {
      // 用户名修改
      this.$refs.form.validate(async (v) => {
        if (v) {
          // 密码修改
          let { data } = await this.$axios({
            method: "POST",
            url: "personal/pass",
            data: {
              pass1: this.form.pass1,
              pass2: this.form.pass2,
            },
          });
          console.log(data);
          // 修改失败
          if (data.code) {
            return this.$message.error(data.message);
          } else {
            // 修该成功
            this.$message.success(data.message);
            this.clearUserInfo(); //清空vuex里的数据
            this.$refs.form.resetFields(); // 清空表单
          }
        } else {
          return false;
        }
      });
    },
    // 退出登录
    async loginOut() {
      let { data } = await this.$axios({
        method: "POST",
        url: "login/out",
      });
      // 退出成功
      this.$message.success(data.message);
      this.clearUserInfo(); //清空vuex里的数据
    },
    // 原密码
    yuanb() {
      this.pass4 = "text";
      this.eyeflag = false;
    },
    yuanz() {
      this.pass4 = "password";
      this.eyeflag = true;
    },
    // 新密码
    yuanb1() {
      this.pass5 = "text";
      this.yuanflag = false;
    },
    yuanz1() {
      this.pass5 = "password";
      this.yuanflag = true;
    },
    // 确认密码
    yuanb2() {
      this.pass6 = "text";
      this.queflag = false;
    },
    yuanz2() {
      this.pass6 = "password";
      this.queflag = true;
    },
  },
};
</script>

<style lang="less" scoped>
.modify-mation {
  margin-left: 20px;
}
.el-input {
  position: relative;
  width: 240px;
}
// .el-form-item__content{
//   position: relative;
// }
/deep/ .el-input__inner {
  padding: 0 30px 0 15px;
}
.el-form-item__content .eyedown,
.el-form-item__content .eyeup {
  position: absolute;
  top: 0px;
  right: 130px;
  cursor: pointer;
}
.btnout {
  background-color: #ccc;
  width: 98px;
  height: 40px;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
</style>